---
title: relay-operation-optimizer
description: A GraphQL Codegen feature for bringing the benefits of Relay Compiler to any GraphQL Client using Relay Operation Optimizer.
---

import { Callout } from '@theguild/components'
import { PluginHeader } from '@/components/plugin'
import { pluginGetStaticProps } from '@/lib/plugin-get-static-props'
export const getStaticProps = pluginGetStaticProps(__filename)

<PluginHeader />

_Built and maintained by [n1ru4l](https://github.com/n1ru4l)_.

A GraphQL Codegen feature for bringing the benefits of Relay Compiler to any GraphQL Client using [Relay Operation Optimizer](https://graphql-tools.com/docs/relay-operation-optimizer).

You can test how relay-compiler affects your queries over on the [Relay Compiler REPL](https://relay-compiler-repl.netlify.com).

## List of Features

- [Optimize your Operations](https://relay.dev/docs/principles-and-architecture/compiler-architecture/#transforms) TL;DR: reduce operation complexity and size
  - Inline Fragments
  - Flatten Transform
  - Skip Redundant Node Transform
- FragmentArguments TL;DR: Make your fragments reusable with different arguments
  - [`@argumentsDefinition`](https://relay.dev/docs/en/graphql-in-relay#argumentdefinitions)
  - [`@arguments`](https://relay.dev/docs/en/graphql-in-relay#arguments)

## Usage

Set up your project per the GraphQL Codegen Docs, and add `flattenGeneratedTypes: true{:yaml}` in your `codegen.yml`:

```ts filename="codegen.ts" {11}
import type { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  overwrite: true,
  schema: 'schema.graphql',
  generates: {
    'src/generated-types.tsx': {
      documents: 'src/documents/**/*.graphql',
      config: {
        skipDocumentsValidation: true,
        flattenGeneratedTypes: true
      },
      plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo']
    }
  }
}
export default config
```

Please notice that you have to skip the document validation - but no worries, relay-compiler will validate your documents instead!

<Callout>
  [See Laurin Quast's blog post to learn how to use those directives in your
  operations](https://the-guild.dev/blog/graphql-codegen-relay-compiler)
</Callout>
